
<html lang=""><head>
    <title>注册页面 · MINA</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.0">




    <link rel="stylesheet" href="../../../gitbook/style.css">




    <link rel="stylesheet" href="../../../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../../../gitbook/gitbook-plugin-search/search.css">























    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="module.html">


    <link rel="prev" href="app.html">


</head>
<body>

<div class="book with-summary">
    <div>

        <div class="sub_nav_box">
            <div class="sub_nav_inner">




                <ul class="top_sub_nav">




                    <li class="sub_nav_item " data-level="1.1" data-path="../../">

                        <a href="../../">


                            简易教程

                        </a>

                    </li>

                    <li class="sub_nav_item selected" data-level="1.2" data-path="../MINA.html">

                        <a href="../MINA.html">


                            框架

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.3" data-path="../../component/">

                        <a href="../../component/">


                            组件

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.4" data-path="../../api/">

                        <a href="../../api/">


                            API

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.5" data-path="../../devtools/devtools.html">

                        <a href="../../devtools/devtools.html">


                            工具

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.6" data-path="../../qa/qa.html">

                        <a href="../../qa/qa.html">


                            Q&amp;A

                        </a>

                    </li>




                </ul>




                <!-- <h1>注册页面</h1> -->
                <div id="book-search-input" role="search">
                    <form>
                        <label for="search-input" class="search-icon" id="js-search-icon"></label>
                        <input type="text" id="search-input" name="search-input" placeholder="搜索">
                        <button type="reset" class="clear-input-btn"></button>
                    </form>
                </div>
            </div>
        </div>

        <div class="book-summary">


            <nav role="navigation">





                <ul class="summary">


                    <li class="chapter  " data-level="1.2.1" data-path="../structure.html">

                        <a href="../structure.html">


                            目录结构

                        </a>



                    </li>

                    <li class="chapter  " data-level="1.2.2" data-path="../config.html">

                        <a href="../config.html">


                            配置

                        </a>



                    </li>

                    <li class="chapter  open" data-level="1.2.3" data-path="./">

                        <a href="./">


                            逻辑层

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.2.3.1" data-path="app.html">

                                <a href="app.html">


                                    注册程序

                                </a>



                            </li>

                            <li class="chapter active " data-level="1.2.3.2" data-path="page.html">

                                <a href="page.html">


                                    注册页面

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.3" data-path="module.html">

                                <a href="module.html">


                                    模块化

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.4" data-path="api.html">

                                <a href="api.html">


                                    API

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.2.4" data-path="../view/">

                        <a href="../view/">


                            视图层

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.2.4.1" data-path="../view/wxml/">

                                <a href="../view/wxml/">


                                    WXML

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.2.4.1.1" data-path="../view/wxml/data.html">

                                        <a href="../view/wxml/data.html">


                                            数据绑定

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.2" data-path="../view/wxml/conditional.html">

                                        <a href="../view/wxml/conditional.html">


                                            条件渲染

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.3" data-path="../view/wxml/list.html">

                                        <a href="../view/wxml/list.html">


                                            列表渲染

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.4" data-path="../view/wxml/template.html">

                                        <a href="../view/wxml/template.html">


                                            模板

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.5" data-path="../view/wxml/event.html">

                                        <a href="../view/wxml/event.html">


                                            事件

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.6" data-path="../view/wxml/import.html">

                                        <a href="../view/wxml/import.html">


                                            引用

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.2.4.2" data-path="../view/wxss.html">

                                <a href="../view/wxss.html">


                                    WXSS

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.4.3" data-path="../view/component.html">

                                <a href="../view/component.html">


                                    组件

                                </a>



                            </li>


                        </ul>

                    </li>


                </ul>


            </nav>


        </div>

        <div class="book-body">

            <div class="body-inner">

                <!--

                <div class="book-header" role="navigation">

                </div>


                 -->

                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    <h1 id="page">Page</h1><p><code>Page()</code>函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等。</p><p><strong>object参数说明：</strong></p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>类型</th>
                                        <th>描述</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="#初始化数据">data</a></td>
                                    <td>Object</td>
                                    <td>页面的初始数据</td>
                                </tr><tr><td>onLoad</td>
                                    <td>Function</td>
                                    <td>生命周期函数--监听页面加载</td>
                                </tr><tr><td>onReady</td>
                                    <td>Function</td>
                                    <td>生命周期函数--监听页面渲染完成</td>
                                </tr><tr><td>onShow</td>
                                    <td>Function</td>
                                    <td>生命周期函数--监听页面显示</td>
                                </tr><tr><td>onHide</td>
                                    <td>Function</td>
                                    <td>生命周期函数--监听页面隐藏</td>
                                </tr><tr><td>onUnload</td>
                                    <td>Function</td>
                                    <td>生命周期函数--监听页面卸载</td>
                                </tr><tr><td>其他</td>
                                    <td>Any</td>
                                    <td>开发者可以添加任意的函数或数据到Object参数中，用<code>this</code>可以访问</td>
                                </tr></tbody></table>

                                    <p><strong>示例代码：</strong></p><pre><code class="lang-javascript"><span class="hljs-comment">//index.js</span>
Page({
  data: {
    text: <span class="hljs-string">"This is page data."</span>
  },
  onLoad: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">options</span>) </span>{
    <span class="hljs-comment">// Do some initialize when page load.</span>
  },
  onReady: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// Do something when page ready.</span>
  },
  onShow: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// Do something when page show.</span>
  },
  onHide: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// Do something when page hide.</span>
  },
  onUnload: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// Do something when page close.</span>
  },
  <span class="hljs-comment">// Event handler.</span>
  viewTap: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">this</span>.setData({
      text: <span class="hljs-string">'Set some data for updating view.'</span>
    })
  }
})</code></pre>
                                    <h3 id="初始化数据">初始化数据</h3><p>初始化数据将作为页面的第一次渲染。data将会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成JSON的格式：字符串，数字，布尔值，对象，数组。</p><p>渲染层可以通过<a href="../view/wxml/">WXML</a>对数据进行绑定。</p><p><strong>示例代码：</strong></p><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{text}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{array[0].msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></code></pre>
<pre><code class="lang-javascript">Page({
  data: {
    text: <span class="hljs-string">'init data'</span>,
    array: [{msg: <span class="hljs-string">'1'</span>}, {msg: <span class="hljs-string">'2'</span>}]
  }
})</code></pre>
                                    <h3 id="事件处理函数">事件处理函数</h3><p>​    除了初始化数据和生命周期函数，Page中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入<a href="../view/wxml/event.html">事件绑定</a>，当达到触发事件时，就会执行Page中定义的事件处理函数。</p><p><strong>示例代码：</strong></p><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"viewTap"</span>&gt;</span> click me <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></code></pre>
<pre><code class="lang-javascript">Page({
  viewTap: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'view tap'</span>)
  }
})</code></pre>
                                    <h3 id="pageprototypesetdata">Page.prototype.setData()</h3><p><code>setData</code>函数用于将数据从逻辑层发送到视图层，同时改变<code>对应的this.data的值</code>。</p><p><strong>注意：</strong></p><ol><li><strong>直接修改this.data无效，无法改变页面的状态，还会造成数据不一致。</strong>
                                </li>
                                    <li><strong>单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据</strong>。
                                    </li></ol>
                                    <h3 id="setdata参数格式">setData()参数格式</h3><p>接受一个对象，以key，value的形式表示将this.data中的key对应的值改变成value。</p><p>其中key可以非常灵活，以数据路径的形式给出，如<code>array[2].message</code>，<code>a.b.c.d</code>，并且不需要在this.data中预先定义。</p><p><strong>示例代码：</strong></p><pre><code class="lang-html"><span class="hljs-comment">&lt;!--index.wxml--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{text}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"changeText"</span>&gt;</span> Change normal data <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{array[0].text}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"changeItemInArray"</span>&gt;</span> Change Array data <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{obj.text}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"changeItemInObject"</span>&gt;</span> Change Object data <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>{{newField.text}}<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"addNewField"</span>&gt;</span> Add new data <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
<pre><code class="lang-js"><span class="hljs-comment">//index.js</span>
Page({
  data: {
    text: <span class="hljs-string">'init data'</span>,
    array: [{text: <span class="hljs-string">'init data'</span>}],
    object: {
      text: <span class="hljs-string">'init data'</span>
    }
  },
  changeText: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// this.data.text = 'changed data'  // bad, it can not work</span>
    <span class="hljs-keyword">this</span>.setData({
      text: <span class="hljs-string">'changed data'</span>
    })
  },
  changeItemInArray: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// you can use this way to modify a danamic data path</span>
    <span class="hljs-keyword">var</span> changedData = {}
    <span class="hljs-keyword">var</span> index = <span class="hljs-number">0</span>
    changedData[<span class="hljs-string">'array['</span> + index + <span class="hljs-string">'].text'</span>] = <span class="hljs-string">'changed data'</span>
    <span class="hljs-keyword">this</span>.setData(changedData)
  },
  changeItemInObject: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">this</span>.setData({
      <span class="hljs-string">'object.text'</span>: <span class="hljs-string">'changed data'</span>
    });
  },
  addNewField: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">this</span>.setData({
      <span class="hljs-string">'newField.text'</span>: <span class="hljs-string">'new data'</span>
    })
  }
})</code></pre>
                                    <p><strong>以下内容你不需要立马完全弄明白，不过以后它会有帮助。</strong></p><h3 id="生命周期函数">生命周期函数</h3><p>下图说明了Page实例的生命周期。</p><p><img src="../../image/mina-lifecycle.png" style="max-height:1000px;height:1000px"></p><h3 id="页面的路由">页面的路由</h3><p>在小程序中所有页面的路由全部由MINA进行管理，对于路由的触发方式以及页面生命周期函数如下：</p><table>
                                    <thead>
                                    <tr><th>路由方式</th>
                                        <th>触发时机</th>
                                        <th>路由后页面</th>
                                        <th>路由前页面</th>
                                    </tr></thead><tbody>
                                <tr><td>初始化</td>
                                    <td>小程序打开的第一个页面</td>
                                    <td>onLoad，onShow</td>
                                    <td></td>
                                </tr><tr><td>打开新页面</td>
                                    <td>调用API<code>wx.nativateTo</code>或使用组件Natigator</td>
                                    <td>onLoad，onShow</td>
                                    <td>onHide</td>
                                </tr><tr><td>页面重定向</td>
                                    <td>调用API<code>wx.redirectTo</code>或使用组件Natigator</td>
                                    <td>onLoad，onShow</td>
                                    <td>onUnload</td>
                                </tr><tr><td>页面返回</td>
                                    <td>调用API<code>wx.navigatBack</code>或用户按左上角返回按钮</td>
                                    <td>onShow</td>
                                    <td>onUnload</td>
                                </tr><tr><td>Tab切换</td>
                                    <td>多Tab模式下用户切换Tab</td>
                                    <td>第一次打开onLoad，onshow；否则onShow</td>
                                    <td>onHide</td>
                                </tr></tbody></table>



                                </section>

                            </div>
                            <div class="search-results">
                                <div class="has-results">

                                    <h1 class="search-results-title"><span class="search-results-count"></span> 个结果 "<span class="search-query"></span>"</h1>
                                    <ul class="search-results-list"></ul>

                                </div>
                                <div class="no-results">

                                    <h1 class="search-results-title">没有找到相关内容 "<span class="search-query"></span>"</h1>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="foot" id="footer">
                    <ul class="links ft">
                        <li class="links_item"><a href="">关于腾讯</a></li>
                        <li class="links_item"><a href="">服务协议</a></li>
                        <li class="links_item"><a href="">运营规范</a></li>
                        <li class="links_item"><a href="">辟谣中心</a></li>
                        <li class="links_item"><a href="">客服中心</a></li>
                        <li class="links_item"><a href="">联系邮箱</a></li>
                        <li class="links_item"><a href="">侵权投诉</a></li>
                        <li class="links_item">
                            <p class="copyright">Copyright © 2012-<span id="s_copyright_year"></span> Tencent. All Rights Reserved.</p>
                        </li>
                    </ul>
                </div>

            </div>



            <a href="app.html" class="navigation navigation-prev " aria-label="Previous page: 注册程序">
                <i class="fa fa-angle-left"></i>
            </a>


            <a href="module.html" class="navigation navigation-next " aria-label="Next page: 模块化">
                <i class="fa fa-angle-right"></i>
            </a>



        </div>
    </div>


    <script src="../../../gitbook/gitbook.js"></script>
    <script src="../../../gitbook/theme.js"></script>


    <script src="../../../gitbook/gitbook-plugin-search/search-engine.js"></script>



    <script src="../../../gitbook/gitbook-plugin-search/search.js"></script>



    <script src="../../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>



    <script src="../../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>


    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"注册页面","level":"1.2.3.2","depth":3,"next":{"title":"模块化","level":"1.2.3.3","depth":3,"path":"framework/app-service/module.md","ref":"framework/app-service/module.md","articles":[]},"previous":{"title":"注册程序","level":"1.2.3.1","depth":3,"path":"framework/app-service/app.md","ref":"framework/app-service/app.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"ignoreSpecialCharacters":false,"maxIndexSize":1000000},"theme-default":{"showLevel":false,"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}},"file":{"path":"framework/app-service/page.md","mtime":"2016-09-22T03:20:50.000Z","type":"markdown"},"gitbook":{"version":"3.2.0","time":"2016-09-22T09:40:22.799Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>




</div></body></html>